<script setup lang="ts">
import { vElementHover } from '@vueuse/components'
import { ContentType, type MasonryList } from './type'

const props = withDefaults(
  defineProps<{
    item: MasonryList
    imgId: string
    type: ContentType | undefined | null
  }>(),
  {}
)

const contentRef = useTemplateRef('contentRef')

const onVideoHover = (hovered: boolean, item: MasonryList) => {
  const video: HTMLVideoElement = contentRef.value?.querySelector(
    `#waterfall-video-${item.id}`
  ) as HTMLVideoElement
  // console.log('onVideoHover', video)
  if (video) {
    video.style.zIndex = '1'
    hovered ? video.play() : video.pause()
  }
}

// 跳转到详情页
// const route = useRouter()
const goToDetail = () => {
  navigateTo({
    path: 'detail',
    query: {
      id: props.item.id,
      type: props.type
    }
  })
}

const handleStar = () => {
  console.log('handleStar', props.item)
}

const handleSameStyle = () => {
  console.log('handleSameStyle', props.item)
}
</script>

<template>
  <div
    ref="contentRef"
    v-element-hover="[(hovered: boolean) => onVideoHover(hovered, item), { delayEnter: 400 }]"
    class="img-video"
    @click="goToDetail()"
  >
    <div
      v-if="type !== undefined && type !== null"
      class="content-type"
    >
      <div v-if="type === ContentType.INSPIRATION">灵感</div>
      <div v-else-if="type === ContentType.DESIGN">设计竞选</div>
      <div v-else-if="type === ContentType.GOOD">好物</div>
    </div>
    <SvgIcon
      class="video"
      name="my-svg:icon-dvd-fill"
      size="24"
    />
    <img
      v-if="item.src"
      :id="imgId"
      alt=""
      class="waterfall-img"
      crossorigin="anonymous"
      :src="item.src"
    />
    <video
      v-if="item.video"
      :id="`waterfall-video-${item.id}`"
      class="waterfall-video"
      :controls="false"
      loop
      muted
      :src="item.video"
    />
    <div
      class="content"
      :class="{
        'content-inner-gap': item.type === ContentType.DESIGN || item.type === ContentType.GOOD
      }"
      :style="
        !item.dominantColor
          ? undefined
          : `--dominant-color: rgba(${item.dominantColor.r}, ${item.dominantColor.g}, ${item.dominantColor.b}, 1);--dominant-color-1: rgba(${item.dominantColor.r}, ${item.dominantColor.g}, ${item.dominantColor.b}, 0.8)`
      "
    >
      <div
        v-if="type === ContentType.INSPIRATION"
        class="inspiration-user"
      >
        <div class="user-avatar">
          <img
            alt=""
            :src="item.src"
          />
          <el-text
            line-clamp="1"
            size="small"
          >
            小悟空4468
          </el-text>
        </div>
        <el-button
          class="star-bt"
          plain
          type="text"
          @click.stop="handleStar"
        >
          33
          <template #icon>
            <iconpark-icon name="dianzan-full" />
          </template>
        </el-button>
      </div>
      <div class="bottom-mask" />
      <div class="content-info">
        <el-space
          v-if="type === ContentType.INSPIRATION"
          direction="vertical"
          fill
          :size="8"
        >
          <el-text
            line-clamp="2"
            size="small"
            style="color: #fff"
          >
            写实风格，体育实况录像，奥运会拳击台上，围绳区域内，一位戴着蓝色拳击手套的黑人拳击手正在与一只戴着红色拳击手套的袋鼠对打，袋鼠出拳，并弹跳起来双腿踢人，穿黑白条纹服的白人裁判员冲到运动员和袋鼠之间，吹哨举手拦住袋鼠，周围台下观众席人类热烈举手加油欢呼
          </el-text>
          <el-button
            class="same-style-bt"
            color="rgba(255, 255, 255, 0.08)"
            type="primary"
            @click.stop="handleSameStyle"
          >
            一键同款
          </el-button>
        </el-space>
        <div v-else-if="type === ContentType.DESIGN">
          <el-space
            direction="vertical"
            fill
            :size="8"
            style="width: 100%"
          >
            <el-text
              line-clamp="1"
              style="color: #fff"
            >
              工业余韵里的繁华-老城改建项目
            </el-text>
            <div class="tag-container">
              <el-tag
                v-for="tag in 3"
                :key="tag"
                class="tag"
                color="rgba(255, 255, 255, 0.08)"
                :hit="false"
                type="info"
              >
                tag-{{ tag }}
              </el-tag>
            </div>
            <el-space
              fill
              :fill-ratio="1"
              :size="2"
            >
              <el-text type="primary">￥2268.00</el-text>
              <el-text
                size="small"
                style="text-align: right"
              >
                3人参与
              </el-text>
            </el-space>
          </el-space>
        </div>
        <div v-else-if="type === ContentType.GOOD">
          <el-space
            class="good-content-info"
            :size="8"
            style="width: 100%"
          >
            <img
              alt=""
              class="good-img"
              :src="item.src"
            />
            <el-space
              alignment="normal"
              direction="vertical"
              fill
              :size="4"
              style="width: 100%"
            >
              <el-text
                line-clamp="1"
                style="color: #fff"
              >
                暮歌云懒人沙发南瓜椅子
              </el-text>
              <div class="tag-container">
                <el-tag
                  v-for="tag in 3"
                  :key="tag"
                  class="tag"
                  color="rgba(255, 255, 255, 0.08)"
                  :hit="false"
                  type="info"
                >
                  tag-{{ tag }}
                </el-tag>
              </div>
              <el-space
                fill
                :fill-ratio="1"
                :size="2"
              >
                <el-text type="primary">￥2268.00</el-text>
                <el-text
                  size="small"
                  style="text-align: right; color: rgb(255 255 255 / 25%)"
                >
                  已售288
                </el-text>
              </el-space>
            </el-space>
          </el-space>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.img-video {
  --my-waterfall-bottom-content-height: 100px;

  position: relative;
  @bottom-mask-height: 100px;

  // animation: show-animation 0.1s ease-out;

  // @keyframes show-animation {
  //   0% {
  //     opacity: 0;
  //   }

  //   99% {
  //     opacity: 0;
  //   }

  //   100% {
  //     opacity: 1;
  //   }
  // }

  .content-type {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 16px;
    color: #fff;
    background: rgb(0 0 0 / 50%);
    border-radius: 30px;
    z-index: 99;
  }

  .video {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 99;
  }

  .waterfall-img {
    // display: block;
    width: 100%;
    object-fit: cover;
  }

  .waterfall-video {
    position: absolute;
    width: 100%;
    object-fit: cover;
    inset: 0;
    z-index: -1;
  }

  .inspiration-user {
    position: absolute;
    top: -36px;
    display: flex;
    align-items: center;
    padding: 12px;
    width: 100%;
    height: 32px;
    z-index: 99;

    .user-avatar {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 5px;

      img {
        width: 14px;
        height: 14px;
        border-radius: 50%;
      }
    }

    .star-bt {
      color: #fff;
      flex-direction: row-reverse;
    }
  }

  &:hover {
    .content {
      height: var(--my-waterfall-bottom-content-height);
      transition: height 0.3s ease-out;
      transition-delay: 0.4s;

      .bottom-mask {
        transition-delay: 0.4s;
        height: @bottom-mask-height;
      }
    }
  }

  .content {
    --dominant-color: #0003;
    --dominant-color-1: #0003;

    position: relative;
    width: 100%;
    height: 0;
    // height: var(--my-waterfall-bottom-content-height); // debug
    background: linear-gradient(to bottom, #0003, #0003), var(--dominant-color);
    z-index: 9;
    transition: all 0.4s;
    backdrop-filter: blur(180px);

    &.content-inner-gap {
      --my-waterfall-bottom-content-height: 100px;

      position: absolute;
      bottom: 4px;
      right: 4px;
      left: 4px;
      width: initial;
      background: rgb(40 45 45 / 80%);
      border-radius: 2px;
      backdrop-filter: blur(15px);

      .bottom-mask {
        display: none;
      }
    }

    .bottom-mask {
      position: absolute;
      top: calc(0px - @bottom-mask-height);
      right: 0;
      left: 0;
      height: 0;
      // height: @bottom-mask-height; // debug
      background: linear-gradient(0deg, #0003, #0000 50%),
        linear-gradient(0deg, var(--dominant-color) 0%, transparent 50%);
      z-index: 10;
      pointer-events: none;
    }

    .content-info {
      position: relative;
      overflow: hidden;
      padding: 12px;
      z-index: 99;

      .same-style-bt {
        color: rgb(255 255 255 / 65%);
        border: none;
        backdrop-filter: blur(10px);
      }

      .tag {
        border: none;
      }

      .good-img {
        min-width: 64px;
        // width: 64px;
        // height: 64px;
        max-height: calc(var(--my-waterfall-bottom-content-height) - 24px);
        border-radius: 4px;
        aspect-ratio: 1;
        object-fit: cover;
      }

      .good-content-info {
        :deep(&.el-space) {
          .el-space__item:nth-child(2) {
            flex: 1;
          }
        }
      }

      .tag-container {
        display: flex;
        align-items: center;
        gap: 2px;

        :deep(.el-tag__content) {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
